<template>
    <div v-if="show" class="promptTip">
        <div v-if="props.type == 'default'">
            <div class="promptIco">
                <div :class="iconClass"></div>
            </div>
            <div v-if="props.title" class="title" v-html="props.title">
            </div>
            <div v-if="props.content" class="content" v-html="props.content">
            </div>
            <div v-if="props.btn" class="btnArea">
                <div class="btn" @click="runCallback(props.btn.callback)">{{props.btn.label}}</div>
            </div>
        </div>
        <div v-else-if="props.type == 'upgrade'">
            <div class="promptIco">
                <div class="icon_prompt_default" :class="props.type"></div>
            </div>
            <div v-if="props.title" class="title main_color">
                {{props.title}}
            </div>
            <div v-if="props.content" class="content">
                {{props.content}}
            </div>
            <div v-if="props.btn" class="btnArea">
                <div class="btn" @click="runCallback(props.btn.callback)">{{props.btn.label}}</div>
            </div>
            <div v-else class="btnArea">
                <div class="btn" @click="goUpgrade">{{language.connections_promptBtnUpgrade}}</div>
            </div>
        </div>
        <div v-if="props.type == 'noico'">
            <div v-if="props.title" class="title main_color">
                {{props.title}}
            </div>
            <div v-if="props.content" class="content">
                {{props.content}}
            </div>
            <div v-if="props.btn" class="btnArea">
                <div class="btn" @click="runCallback(props.btn.callback)">{{props.btn.label}}</div>
            </div>
        </div>
        <div v-if="props.type == 'noSpark'" class="noSpark main_border">
            <div class="noSparkIco icon_no_spark">
            </div>
            <div v-if="props.title" class="title main_color">
                {{props.title}}
            </div>
            <div v-if="props.content" class="content">
                {{props.content}}
            </div>
            <div v-if="props.btn" class="btnArea">
                <div class="btn" @click="runCallback(props.btn.callback)">{{props.btn.label}}</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    /*props example {
        type: 'default', //type
        title: '', //prompt title
        content: '', //prompt content
        btn: {
            label : '',
            callback : function(){}
        }, //prompt btn
    }*/

    name: 'promptTip',

    props: ['props'],

    data: function() {
        return {
            show: false,
        }
    },

    watch: {
        props(cur) {
            this.setShow(cur);
        },
    },

    activated: function() {
        this.setShow(this.props);
    },

    computed: {
        iconClass:function(){
            var vClass = '',
                propsType = this.props.type,
                propsIcon = this.props.icon;
            vClass += propsType + ' ';
            vClass += propsIcon ? propsIcon : 'icon_prompt_default';
            return vClass;
        }

    },

    methods: {

        setShow: function(obj) {
            if (obj && typeof(obj.type) != 'undefined') {
                this.show = true;
            } else {
                this.show = false;
            }
        },

        runCallback: function(callback) {
            if (callback) {
                callback();
            }
        },

        goUpgrade: function() {
            this.$router.push('/upgrade');
        },
    }
}

</script>
<style scoped>
.promptTip {
    margin: 20px auto 0 auto;
    max-width: 300px;
}

.promptTip .promptIco div {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 48px auto auto auto;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 34px;
    background-color: #d4d4d4;
}

.promptTip .title {
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    margin: 20px auto auto auto;
    color: #1e1e1e;
}

.promptTip .title.main_color{
    opacity: .9;
}

.promptTip .content {
    color: #999999;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    margin: 17px auto auto auto;
}

.promptTip .btnArea {
    margin: 20px auto auto auto;
}

.promptTip .noSpark {
    border: 1px dashed #c8a766;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    margin: auto;
    max-width: 280px;
    max-height: 265px;
    margin-top: 100px;
    /*   position: absolute; 真机无法点击
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    */
    border-radius: 5px;
}

.promptTip .noSparkIco {
    width: 75px;
    height: 96px;
    margin: 5px auto auto auto;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75px auto;
}

.promptTip .noSpark .btnArea .btn {
    box-sizing: border-box;
    max-width: 150px;
}

.promptTip .noSpark .content {
    font-size: 15px;
    color: #1e1e1e;
}

</style>
